<template>
  <!-- 测试上传 -->
  <div class="container">
    <el-card :body-style="{ padding: 10 }" v-if="activeName == '1'">
      <el-button type="primary" size="medium" @click="addFields('1')">盒字段维护</el-button>
      <el-button type="primary" size="medium" @click="pageSettings('1')">页面设置</el-button>
      <el-button type="primary" size="medium" @click="ImportExportSet('1')">
        <hlepMessage messageText="导入设置：设置的是在“新建档案/盒”菜单中”下载模版“中的字段；<br>导出设置：设置的是在”档案/盒查询“菜单中”导出“的字段;"></hlepMessage>
        导入导出设置
      </el-button>
    </el-card>
    <el-card :body-style="{ padding: 10 }" v-else>
      <el-button type="primary" size="medium" @click="addFields('0')">档案字段维护</el-button>
      <el-button type="primary" size="medium" @click="pageSettings('0')">页面设置</el-button>
      <el-button type="primary" size="medium" @click="ImportExportSet('0')">导入导出设置</el-button>
    </el-card>
    <el-tabs tab-position="left" type="border-card" v-model="activeName" class="fieldsTab">
      <el-tab-pane label="盒字段管理" name="1">
        <custom-Table :tableData="list" :label="label"></custom-Table>
      </el-tab-pane>
      <el-tab-pane label="档案字段管理" name="0">
        <custom-Table :tableData="list" :label="label"></custom-Table>
      </el-tab-pane>
    </el-tabs>
    <custom-Dialog v-if="IsShowflag2" ref="customDialog" :parentTableData="list" :activeFlag="activeName"
      @uplist="getbusFieldDefine" @destroyed="destroyed"></custom-Dialog>
    <page-Settings ref="pageSettings" :leftData="list" :label="label" v-if="IsShowflag"></page-Settings>
    <ImportExport-Set ref="ImportExportSet"></ImportExport-Set>
  </div>
</template>

<script>
import { busFieldDefineListLabel, busFieldDefineListBox } from '@/api/sys/field'
import customDialog from './customDialog.vue'
import customTable from './customTable.vue'
import pageSettings from './pageSettings.vue'
import ImportExportSet from './ImportExportSet.vue'
import HlepMessage from '@/components/hlepMessage.vue'
export default {
  name: 'CustomFields',
  components: {
    customTable,
    customDialog,
    pageSettings,
    ImportExportSet,
    HlepMessage,
  },
  data() {
    return {
      activeName: '1',
      list: [],
      customDialog: false,
      label: '0',
      IsShowflag: false,
      IsShowflag2: false,
    }
  },
  watch: {
    activeName(newv) {
      this.getbusFieldDefine(newv)
    },
  },

  created() { },
  mounted() {
    this.getbusFieldDefine(1)
  },

  methods: {
    // 页面设置
    pageSettings(label) {
      this.label = label
      this.IsShowflag = true
      this.$nextTick(() => {
        this.$refs.pageSettings.openDialog(label)
      })
    },
    // 销毁组件
    destroyed() {
      this.IsShowflag2 = false
    },
    // 添加字段
    addFields(type) {
      this.IsShowflag2 = true
      this.$nextTick(() => {
        this.$refs.customDialog.add(type)
      })
    },
    // 导出导入设置
    ImportExportSet(label) {
      this.label = label
      this.$refs.ImportExportSet.openDialog(label)
    },
    //获取字段数据
    getbusFieldDefine(label) {
      var url
      if (label == 1) {
        url = busFieldDefineListBox(0)
      } else {
        url = busFieldDefineListLabel(0)
      }
      url
        .then((res) => {
          if (res.data.code == 200) {
            this.list = res.data.data
            this.$store.commit('setFiels', res.data.data)
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
  },
}
</script>

<style lang="less" scoped>
.fieldsTab {
  .el-tabs__item {
    height: 50%;
  }

  .el-tabs__header {
    height: 60vh !important;
  }

  .el-tabs__nav {
    height: 100%;
  }

  .el-tabs__item {
    writing-mode: vertical-rl;
    /* 垂直从右向左书写 */
    font-weight: 700;
    // height: 50%;
    text-align: center !important;
    /* 使文本垂直居中 */
    font-size: 20px;
    padding: 0 10px;
  }

  .el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable {
    padding: 0;
  }

  .el-tabs--border-card {
    border: none;
    box-shadow: none;
  }

  .el-tabs--border-card>.el-tabs__content {
    padding: 5px 5px 0 5px;
  }
}
</style>
